import React, { useState } from 'react';
import './index.css'; // 导入样式文件

// 新增用户表单组件
const UserForm = ({ addUser }) => {
    const [userName, setUserName] = useState('');
    const [sex, setSex] = useState('');
    const [age, setAge] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        addUser(userName, sex, age);
        setUserName('');
        setSex('');
        setAge('');
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="用户名"
                value={userName}
                onChange={(e) => setUserName(e.target.value)}
            />
            <input
                type="text"
                placeholder="性别"
                value={sex}
                onChange={(e) => setSex(e.target.value)}
            />
            <input
                type="number"
                placeholder="年龄"
                value={age}
                onChange={(e) => setAge(e.target.value)}
            />
            <button type="submit">添加</button>
        </form>
    );
};

export default UserForm;